<template>
  <div>
    <Topnav titleTExt="个人中心" />
    <!-- 头部 -->
    <div class="content" @click="$router.push('/edit')">
      <!--用户部分  -->
      <div class="user" v-if="userinfo">
        <!-- 用户头像 -->
        <div class="user_img" v-if="userinfo.head_img">
          <img :src="$axios.defaults.baseURL + userinfo.head_img" />
        </div>
        <div class="user_img" v-else>
          <img
            src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2103755331,3068281572&fm=26&gp=0.jpg"
            alt
          />
        </div>
        <div class="user_name">
          <!-- 性别图标 -->
          <span class="iconfont icon-nv"></span>
          <span class="nickname">{{ userinfo.nickname }}</span>
          <p class="date">
            {{ moment(userinfo.create_date).format("YYYY-MM-DD") }}
          </p>
        </div>
        <!-- 右侧箭头 -->
        <div class="arrow">
          <span class="iconfont icon-jiantou1"></span>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <Navbar
      labeltext="我的关注"
      infotext="关注的用户"
      @barClick="$router.push('/follow')"
    />
    <Navbar
      labeltext="我的跟帖"
      infotext="跟帖/回复"
      @barClick="$router.push('/mycomments')"
    />
    <Navbar
      labeltext="我的收藏"
      infotext="文章/视频"
      @barClick="$router.push('/collect')"
    />
    <Navbar labeltext="栏目管理" @barClick="$router.push('/category')" />
    <Navbar labeltext="退出" @barClick="exit" />
  </div>
</template>
<script>
import Navbar from "@/components/Navbar";
import Topnav from "@/components/Topnav";
// 引入第三方时间转换工具
import moment from "moment";
export default {
  data() {
    return {
      // moment 为了能在模板中使用，要绑定在data中
      moment,
      userinfo: {},
    };
  },
  components: {
    Navbar,
    Topnav,
  },
  mounted() {
    const token = localStorage.getItem("token");
    const id = localStorage.getItem("userId");

    this.$axios({
      url: "/user/" + id,
      method: "get",
      headers: {
        Authorization: "Bearer " + token,
      },
    }).then((res) => {
      console.log(res);

      const { message, data } = res.data;
      if (message === "获取成功") {
        this.userinfo = data;
        // console.log(this.userinfo);
        // }
        //  else if (message === "用户信息验证失败") {
        //   // 用户验证失败清除本地token 和 id 跳转到登录页
        //   localStorage.removeItem("token");
        //   localStorage.removeItem("userId");
        //   this.$router.replace("/login");
      } else {
        this.$toast.fail("获取失败");
      }
    });
  },
  methods: {
    handleBar(name) {
      console.log(name);
    },
    exit() {
      this.$dialog
        .confirm({
          title: "提示",
          message: " 确定退出？",
        })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("userId");
          this.$router.replace("/login");
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 5.556vw;
  border-bottom: 5px solid #eee;
  .user {
    display: flex;
    align-items: center;
  }
  .user_img {
    img {
      width: 19.444vw;
      height: 19.444vw;
      border-radius: 50%;
    }
  }
  .user_name {
    flex: 1;
    color: #000;
    margin-left: 2.778vw;
    .date {
      margin-top: 1.667vw;
      color: #999;
    }
    .icon-nv {
      color: blue;
    }
    .nickname {
      margin-left: 1.389vw;
    }
  }
}
.navbar {
  padding: 5.556vw 5.556vw 5.556vw 0;
  margin-left: 5.556vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.278vw solid #cccc;
  .mine {
    font-size: 3.889vw;
    color: #333;
  }
  .info {
    font-size: 3.611vw;
    color: #999;
  }
}
</style>
